<script setup>
import NavigationBarStricky from "@/views/Common/NavigationBarSticky.vue";
import PageHeader from "@/views/Common/PageHeader.vue";
import NavigationBar from "@/views/Common/NavigationBar.vue";
import PageFooter from "@/views/Common/PageFooter.vue";
import { onMounted } from "vue";
import { useUserStore } from "@/stores/user.js";
import { getUserInfoAPI } from "@/apis/user.js";
import { useRoute } from 'vue-router';

const route = useRoute();

onMounted(()=>{
  updateInfo()
})

const updateInfo=async ()=>{
  const res =await getUserInfoAPI(useUserStore().userInfo.uid)
  if(res.code===200){
    useUserStore().alterUserInfo(res.data)
  }
}
</script>

<template>
  <div class="user-center-page">
    <div class="header-white">
      <NavigationBarStricky />
      <PageHeader />
      <NavigationBar />
    </div>

    <div class="page-container">
      <div class="content">
        <div class="nav-menu">
          <el-menu
              :default-active="route.path"
              class="uc-menu"
              router
          >
            <el-menu-item index="/homepage">
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/userCenter/home">
              <span>物流中心</span>
            </el-menu-item>
            <el-menu-item index="/userCenter/cart">
              <span>我的购物车</span>
            </el-menu-item>
            <el-menu-item index="/userCenter/order">
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="/userCenter/favorites">
              <span>收藏夹</span>
            </el-menu-item>
            <el-sub-menu index="account-settings">
              <template #title>
                <span>账户设置</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/userCenter/info">个人资料</el-menu-item>
                <el-menu-item index="/userCenter/cpwd">修改密码</el-menu-item>
                <el-menu-item index="/userCenter/address">收货地址</el-menu-item>
                <el-menu-item index="/userCenter/open">免费开店</el-menu-item>
                <el-menu-item index="/userCenter/expert">专家认证</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </div>

        <div class="router-view-wrapper">
          <router-view></router-view>
        </div>
      </div>
    </div>

    <PageFooter />
  </div>
</template>

<style scoped lang="less">
.user-center-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f3f6f8;
}

.page-container {
  flex: 1;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.content {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

.nav-menu {
  width: 220px;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  flex-shrink: 0; // 防止导航菜单被压缩

  .uc-menu {
    border-right: none; // 移除 el-menu 默认的右边框
    background-color: transparent;

    .el-menu-item {
      margin: 5px 0;
      height: 45px;
      border-radius: 6px;
      &:hover {
        background-color: #f7f7f7;
      }
      &.is-active {
        background-color: #e6f3ff;
        color: #007bff;
        font-weight: bold;
      }
    }

    .el-sub-menu__title {
      &:hover {
        background-color: #f7f7f7;
      }
    }
  }
}

.router-view-wrapper {
  flex: 1; // 占据剩余空间
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  min-height: 600px; // 保证内容区有个最小高度
}
.header-white{
  background-color: #fff;
  width: 100%;
}

</style>